<template>
  <!--  :style="[$parent.getTitleDirStyle, getModBottom]"-->
  <r-operator
    class="intention"
    :operators="['edit', 'drag', 'skin', 'setting']"
    @edit="isShowEdit = !isShowEdit"
    @skin="isShowSkin = !isShowSkin"
    @setting="isShowSetting = !isShowSetting"
  >
    <r-title
      class="intention__title"
      icon="intention"
      :isShow="isTitleShow"
      v-model="title"
    />
    <div
      class="intention__content"
      :class="settingList.skin"
      :style="getShowStyle"
    >
      <template v-for="(item, index) in dataList">
        <div class="intention__content__item" :key="index" v-if="item.value">
          <i class="resume resume-del" @click="delItem(index)" />
          <template v-if="settingList.skin === 'intention__skin--icon'">
            <img
              alt="图标"
              class="item__content__item--icon"
              :src="item.icon"
              v-if="item.icon"
            />
            <i :class="`resume resume-${item.type}`" />
          </template>
          <span>{{ item.value }}</span>
        </div>
      </template>
    </div>

    <teleport to="#app">
      <edit
        :originData="dataList"
        @save="onSave"
        v-model="isShowEdit"
        v-if="isShowEdit"
      />
    </teleport>
    <!--换肤-->

    <skin
      v-model="settingList.skin"
      v-if="isShowSkin"
      @mouseleave="isShowSkin = false"
    />
    <!--设置-->
    <r-setting
      v-show="isShowSetting"
      v-model="settingList.switchLs"
      @mouseleave="isShowSetting = !isShowSetting"
    />
  </r-operator>
</template>

<script>
import RTitle from "@/components/base/RTitle";
import ROperator from "@/components/base/ROperator";
import RSetting from "@/components/base/RSetting";
import Edit from "./edit";
import { reactive, toRefs, computed } from "vue";
import useData from "../useData";
import Skin from "./skin";

export default {
  name: "Intention",
  components: { Skin, Edit, RSetting, RTitle, ROperator },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const visible = reactive({
      isShowSkin: false,
      isShowSetting: false,
      isShowEdit: false,
    });
    const baseData = useData(props.id);
    const delItem = (index) => {
      baseData.dataList.value[index].value = "";
    };
    const getShowStyle = computed(() => {
      const showNum = baseData.dataList.value.reduce(
        (acc, item) => acc + (item.value ? 1 : 0),
        0
      );
      return { justifyContent: showNum > 2 ? "space-between" : "flex-start" };
    });
    const onSave = (newData) => {
      visible.isShowEdit = false;
      baseData.dataList.value = newData;
    };

    return {
      ...baseData,
      ...toRefs(visible),
      getShowStyle,
      delItem,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.intention {
  display: flex;
  flex-direction: column;

  &__title {
    width: 100%;
  }
  &__content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    &__item {
      position: relative;
      padding: 2px;
      margin-right: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;

      &--icon {
        font-size: 15px;
        width: 15px;
        margin-right: 2px;
      }

      &:hover {
        background: rgba(246, 246, 246, 0.8);

        .resume-del {
          display: block;
        }
      }

      .resume-del {
        position: absolute;
        right: -6px;
        top: -6px;
        width: 12px;
        height: 12px;
        display: none;
      }
    }
  }

  &__skin--after .intention__content__item:not(:last-child):after {
    content: " |";
    display: inline-block;
    margin-left: 2px;
  }

  &__skin--before .intention__content__item:before {
    content: "● ";
    display: inline-block;
    margin-right: 2px;
  }
}
</style>
